<template>
  <el-container class="home-contatiner">
<!--头部区域-->
    <el-header>
        <div>
        <img src="../assets/logo.png" alt="" width="100" height="100">
        <span>宿舍管理系统</span>
        <span>{{name}}</span>
        </div>
        <el-button type="info" @click="loginout">退出</el-button>
    </el-header>
<!--主题区域-->
    <el-container>
<!--      侧边蓝-->
      <el-aside :width="isCollape ? '64px' : '200px'">
          <div class="toggle-button" @click="toggleCollapse">|||</div>
          <!--侧边栏菜单-->
          <el-menu
                  background-color="#545c64"
                  text-color="#fff"
                  active-text-color="#409EFF" unique-opened :collapse="isCollape" :collapse-transition="false"
                    router :default-active="url">
<!--              一级菜单-->
              <el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
                  <template slot="title">
                      <i class="el-icon-location"></i>
                      <span>{{item.name}}</span>
                  </template>
<!--                  二级菜单-->
                  <el-menu-item :index="subItem.url" v-for="subItem in item.subMen" :key="subItem.id" @click="savaNavState(subItem.url)">
                      <template slot="title">
                      <i class="el-icon-menu"></i>
                      <span>{{subItem.name}}</span>
                  </template></el-menu-item>
              </el-submenu>
          </el-menu>
      </el-aside>
<!--      右侧类容-->
      <el-main>
          <router-view ></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>

export default {
  name: 'Home',
  components:{
  },
    data(){
      return {
          menulist:[],
          isCollape: false,
          numberSign: 0,
          time: 5000,
          number: 0,
          name: '',
          //点击的链接
          url: ''
      }
    },
    mounted() {
        this.timer = setInterval(()=>{
            var _this = this;
            let hh = new Date().getHours();
            let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
            let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
            _this.gettime = hh+':'+mf+':'+ss;
            let nowTime = (hh*3600)+(mf*60)+ss
            if(nowTime >= 1 && this.numberSign === 0){
                console.log('xxx2')
                this.getStatues()
            }
            console.log(this.numberSign + 'xv')
            if(nowTime >= 38880){
                this.numberSign = 0
            }
            if(nowTime > 38880){
                this.time = 9000
            }
            console.log(nowTime)

            // var currentDateLong = new Date(this.gettime.replace(new RegExp("-","gm"),"/")).getTime()     //当前时间转换成long型
        }, 10000)
    },
    created() {
        this.getMenuList()
        this.url = window.sessionStorage.getItem('url')
        this.name= window.sessionStorage.getItem('name')
    },
    methods:{
      //退出登录
        loginout(){
            window.sessionStorage.clear();
            this.$router.push('/');
        },
        //获取菜单
        async getMenuList(){
            const token = window.sessionStorage.getItem('token')
            const { data: res} = await this.$http.get('Menu/getAllMenueBytoken',{
                params:{
                    "token": token
                }
            })
            if(res.code !== 200) return this.$message.error(res.message)
            this.menulist = res.data
            console.log(res)
        },
        //点击 ||| 切换菜单折叠
        toggleCollapse(){
            this.isCollape = !this.isCollape
        },
        //保存点击的链接
        savaNavState(url){
            window.sessionStorage.setItem('url',url);
            this.url = url;
        },
        async getStatues(){
            const {data: res} = await this.$http.get('Sign/setSignByopen',{
                params:{
                    id: window.sessionStorage.getItem('id')
                }
            })
            console.log(res)
            if(res.code !== 104 && res.code !== 105) {
                this.number = this.number + 1
                if (this.number < 2) {
                    this.$notify.success({
                        title: 'Info',
                        message: '签到已经开启',
                        duration: 0,
                        showClose: false
                    });
                }
            }else {
                this.numberSign = 1;
            }

        }
    }
}
</script>

<style lang="less" scoped>
    .home-contatiner{
        height: 100%;
    }
  .el-header{
    background-color: #373d41;
      display: flex;
      justify-content: space-between;
      padding-left: 0;
      align-items: center;
      color: #fff;
      font-size: 20px;
      > div {
          display: flex;
          align-items: center;
          span{
              margin-left: 15px;
          }
      }
  }
    .el-aside{
        background-color: #333744;
        .el-menu{
            border-right: none;
        }
    }
    .el-main{
        background-color: #eaedf1;
    }
    .toggle-button {
        background-color: #4A5064;
        font-size: 10px;
        line-height: 24px;
        color: #fff;
        text-align: center;
        letter-spacing: 0.2em;
        cursor: pointer;
    }
</style>


